(function(){
    var lis = document.querySelectorAll('.tab_ctrl');
    for ( let i = 0 ; i < lis.length ; i++){
        lis[i].addEventListener('mouseover',function(){
            $('.tab_ctrl').removeClass('active')
            $('.tab_detail').removeClass('active');
            $(this).addClass('active').find('.tab_detail').addClass('active');
        })
    }

    // 流动效果画方框 
    var li_items = document.querySelectorAll('.drf_list');
    for  ( let i = 0 ; i < li_items.length ; i++){
        li_items[i].addEventListener('mouseover',function(){
            this.querySelector('.bar1').classList.remove('mouseout');
            this.querySelector('.bar2').classList.remove('mouseout');
            this.querySelector('.bar3').classList.remove('mouseout');
            this.querySelector('.bar4').classList.remove('mouseout');
            this.querySelector('.bar5').classList.remove('mouseout');
        })
        li_items[i].addEventListener('mouseout',function(){
            this.querySelector('.bar1').classList.add('mouseout');
            this.querySelector('.bar2').classList.add('mouseout');
            this.querySelector('.bar3').classList.add('mouseout');
            this.querySelector('.bar4').classList.add('mouseout');
            this.querySelector('.bar5').classList.add('mouseout');
        })
    }
})();